<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName"><br />
    名字：<input type="text" placeholder="请输入名字" v-model="user.lastName"><br />
  </fieldset>
  <fieldset>
    <legend>计算属性和监视的演示</legend>
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName1"><br />
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName2"><br />
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName3">
  </fieldset>

</template>

<script lang="ts">
import { defineComponent, reactive, computed, watch, watchEffect, ref } from "vue";
export default defineComponent({
  name: 'App',
  setup() {
    // 定义一个响应式对象
    const user = reactive({
      // 姓氏
      firstName: '东方',
      // 名字
      lastName: '不败'
    })
    // 计算属性中的函数如果只传入一个回调函数，表示的是get
    const fullName1 = computed(() => {
      return user.firstName + '-' + user.lastName
    })
    console.log(fullName1);//ref
    const fullName2 = computed({
      get() {
        return user.firstName + '-' + user.lastName
      },
      set(val: string) {
        // console.log('---', val);
        const names = val.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })

    const fullName3 = ref('')
    // 1.监视--监视指定的数据
    watch(user, ({ firstName, lastName }) => {
      fullName3.value = firstName + '-' + lastName
    }, { immediate: true, deep: true })

    // 2.监视--监视所有回调中使用的数据,不需要配置immediate，本身默认就会进行监视（执行一次）
    // watchEffect(() => {
    //   fullName3.value = user.firstName + '-' + user.lastName
    // })

    // 3.需求--监视fullName3的数据，改变firstName和lastName
    watchEffect(() => {
      const names = fullName3.value.split('-')
      user.firstName = names[0]
      user.lastName = names[1]
    })

    // 当我们使用watch监视非响应式的数据的时候，代码需要改一下------好像修复了但是会报warning
    // watch([user.firstName, user.lastName, fullName3], () => {
    //   console.log('====');
    // })
    // 使用()=>讲其变为响应式数据
    watch([() => user.firstName, () => user.lastName, fullName3], () => {
      console.log('====');
    })

    return {
      user, fullName1, fullName2, fullName3
    }
  }
})
</script>
